<template>
  <div class="main  justify-center">
    <el-card>
      <h2>我的账户</h2>
      <el-form label-width="100px" :model="account">
        <el-form-item label="用户名：&nbsp">
          <el-input v-model="account.username" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="密码：&nbsp&nbsp&nbsp">
          <el-input v-model="account.password" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="密码校验：">
          <el-input v-model="account.repeatPassword" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="电话：&nbsp&nbsp&nbsp">
          <el-input v-model="account.phone" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="地址：&nbsp&nbsp&nbsp">
          <el-input v-model="account.address" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="姓：&nbsp&nbsp&nbsp&nbsp&nbsp">
          <el-input v-model="account.firstname" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="名：&nbsp&nbsp&nbsp&nbsp&nbsp">
          <el-input v-model="account.lastname" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="密保问题：">
          <el-input v-model="account.question" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="密保回答：">
          <el-input v-model="account.answer" :disabled="!isEditing"></el-input>
        </el-form-item>
      </el-form>
      <el-button v-if="!isEditing" type="primary" @click="isEditing = true">修改信息</el-button>
      <el-button v-else type="primary" @click="saveChanges(this.account)">确认修改</el-button>
    </el-card>
  </div>
</template>

<script scoped>
import Top from '@/components/Top.vue'
import axios, { AxiosError } from 'axios'

  export default {
    name:'Myaccount',
    components:{Top},
    data() {
      return {
        isEditing: false,
        account      :{
          username:'',
          password:'',
          repeatPassword:'',
          phone:'',
          address:'',
          firstname:'',
          lastname:'',
          question:'',
          answer:''
        },
        username : localStorage.getItem('username')
      };
    },
    methods:{
      async saveChangesByAjax(){
        const response = await axios({
					url				: `http://127.0.0.1:8080/api/users/updateInfo/${this.username}`,
					method			: 'PUT',
					withCredentials : true,
          headers			: {
    				'Content-Type'	: 'application/json'
  					},
          data        :this.account  
				})
				return response
      }
      ,
        async saveChanges() {
        // 处理确认修改逻辑，可以在这里发送修改请求等
        if(this.account.password !== this.account.repeatPassword){
          console.log('密码不一致!')
        }
        else if(this.account.password == ''){
          console.log('密码不为空！')
        }
        else{
          const [err,result] = await this.promise_error_process(this.saveChangesByAjax())
          if(err)
            console.log(err)
          else
            console.log(result)
        }
        this.isEditing = false // 修改完成后将编辑状态设为false
      },
      //使用结构赋值进行异常处理
			promise_error_process(promise){
				return promise.then(data=>[null,data])
								.catch(err=>[err,null])
			},
      async getAcountByAjax(){
        const response = await axios({
					url				: `http://127.0.0.1:8080/api/users/${this.username}`,
					method			: 'GET',
					withCredentials : true
				})
				return response
      },
      async getAccount(){
        const [err,result] = await this.promise_error_process(this.getAcountByAjax())
        if(err){
          console.log(err)
        }
        else{
          console.log(result)
          this.account.username = result.data.data.username
          this.account.firstname = result.data.data.firstname
          this.account.lastname = result.data.data.lastname
          this.account.address = result.data.data.address
          this.account.phone = result.data.data.phone
          this.account.question = result.data.data.question
          this.account.answer = result.data.data.answer
          console.log(this.account)
        }
      }
    },
    created(){
      this.getAccount()
    }
  }
</script>

<style scoped>
.main{
  justify-items: center;
  align-items: center;
  position: relative;
}
/* 缩小el-input的行高 */
.el-input {
  height: 80%; /* 调整高度为原来的2/3 */
}

/* 调整el-card的宽度为整个div的70% */
.el-card {
  width: 60%; /* 设置宽度为整个div的70% */
  margin-left: 15%;
}
.el-form-item {
  display: flex;

}
.el-form-item .el-form-item__label {
  text-align: center;
}
</style>